﻿@using FineAdmin.Model;
@{
    ViewBag.Title = "好物推荐";
    var GoodsList = ViewBag.GoodsList as List<MaterialGoodsModel>;
}
@section styles{
    <style>
        .item .data {
            font-size: 1.8rem;
        }

        .shoptitle {
            /*display: inline-block;*/
            font-size: .8rem;
            color: grey;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .volume {
            /*display: inline-block;*/
            float: right;
            font-size: .8rem;
            color: brown;
        }

        .cont-text p {
            margin-top: 2px;
        }

        .item .title {
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            font-weight: bold;
            height: 48px;
        }

        .price {
            color: red;
            font-size: 1.2rem;
        }

        .coupon {
            position: absolute;
            padding: 2px 2px 2px 2px;
            top: 4px;
            right: 8px;
            background-color: rgba(255, 0, 0, 0.88);
            color: white;
            border: 1px dotted rgb(246,221,14);
        }


        .item .img-info {
            height: 197.5px;
        }
        
    </style>
}
<div class="album-content w1000 layer-photos-demo" id="layer-photos-demo">
    <div class="img-info">
        @*<img src="../BlogStatic/img/xc_img1.jpg" alt="">*@
        <img src="https://img.alicdn.com/imgextra/i2/2053469401/TB24ylugpkoBKNjSZFkXXb4tFXa_!!2053469401.png" />
        <div class="title">
            <p class="data">今日更新<span>@ViewBag.ToDayCount 条</span></p>
            <p class="text">当前条件下共 @ViewBag.Total 条 </p>
        </div>
    </div>
    <div class="tool">
        
       
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">搜索</label>
                <div class="layui-input-inline">
                    <input type="text" name="key" lay-verify="title" autocomplete="off" placeholder="搜索关键字" class="layui-input" id="key" value="@ViewBag.Key">
                </div>
                <label class="layui-form-label">价格(小)</label>
                <div class="layui-input-inline">
                    <input type="text" name="price_min" id="price_min" lay-verify="title" autocomplete="off" placeholder="￥" class="layui-input" value="@ViewBag.Price_Min">
                </div>

                <label class="layui-form-label">价格(大)</label>
                <div class="layui-input-inline">
                    <input type="text" name="price_max" id="price_max" lay-verify="title" autocomplete="off" placeholder="￥" class="layui-input" value="@ViewBag.Price_Max">
                </div>

                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <select name="sort" lay-verify="" id="sort">
                        <option value="0" @(ViewBag.Sort == 0 ? "selected" : "")>默认排序</option>
                        <option value="1" @(ViewBag.Sort == 1 ? "selected" : "")>价格从低到高</option>
                        <option value="4" @(ViewBag.Sort == 4 ? "selected" : "")>销量从高到低</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn definite" type="button" id="search">搜索</button>
                </div>
            </div>
        </form>
        @*<form class="layui-form" action="">
            <div class="layui-form-item" style="text-align: right;">
                <div class="layui-inline">
                    <input type="text" id="key" placeholder="搜索关键字" class="layui-input" value="@ViewBag.Key">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">价格范围</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" id="price_min" placeholder="￥" autocomplete="off" class="layui-input" value="@ViewBag.Price_Min">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_max" id="price_max" placeholder="￥" autocomplete="off" class="layui-input" value="@ViewBag.Price_Max">
                    </div>
                </div>
                <div class="layui-inline">
                    <select name="sort" lay-verify="" id="sort">
                        <option value="0" @(ViewBag.Sort==0?"selected":"")>默认排序</option>
                        <option value="1" @(ViewBag.Sort==1?"selected":"")>价格从低到高</option>
                        <option value="4" @(ViewBag.Sort==4?"selected":"")>销量从高到低</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn definite" type="button" id="search">搜索</button>
                </div>

            </div>
        </form>*@
    </div>
    <div class="img-list" id="items">
        <div class="layui-fluid" style="padding:0">
            <div class="layui-row layui-col-space30 ">
                @foreach (var item in GoodsList)
                {
                    <div class="layui-col-xs12 layui-col-sm3 layui-col-md3">
                        <div class="item">
                            <div class="layui-card">
                                <a href="@(ViewBag.ShowSite)/Mobile/GoodsDetails?Id=@item.Id">
                                    <div class="layui-card-body">
                                        <div class="coupon">领取 @item.CouponAmount 元券</div>
                                        <img src="@item.PictUrl" />
                                        <p class="title">@(string.IsNullOrEmpty(item.Title) ? item.ShortTitle : item.Title)</p>
                                        <p class="price">券后 <i class="layui-icon layui-icon-rmb"></i> @item.CouponAfterPrice</p>
                                        <p class="shoptitle">@(string.IsNullOrWhiteSpace(item.Nick)? item.ShopTitle:item.Nick)</p>
                                        <p class="volume">30日销量 @item.Volume</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                }

            </div>
        </div>
        <div id="demo"></div>
    </div>
</div>



@section scripts{
    <script>
        var Total = "@ViewBag.Total";
        var Page = "@ViewBag.Page";
    </script>
    <script type="text/javascript">
        layui.config({
            base: '../BlogStatic/js/util/'
        }).use(['element', 'laypage', 'form', 'layer', 'menu', 'jquery'], function () {
            element = layui.element, laypage = layui.laypage, form = layui.form, layer = layui.layer, menu = layui.menu, $ = layui.$;
            laypage.render({
                elem: 'demo'
                , limit: 16
                , curr: Page
                , count: Total //数据总数，从服务端得到
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if (!first) {
                        //do something

                        var searchstr = "?p=" + obj.curr;
                        searchstr += "&key=" + $("#key").val();
                        searchstr += "&pn=" + $("#price_min").val();
                        searchstr += "&px=" + $("#price_max").val();
                        searchstr += "&sort=" + $("#sort").val();

                        window.location.href = "/Good/Index" + searchstr + "#items";
                    }
                }
            });
            //layer.photos({
            //    photos: '#layer-photos-demo'
            //    , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            //    , tab: function (pic, layero) {
            //        console.log(pic, layero)
            //    }
            //});
            menu.init();

            $("#search").click(function () {
                var searchstr = "?p=1";
                searchstr += "&key=" + $("#key").val();
                searchstr += "&pn=" + $("#price_min").val();
                searchstr += "&px=" + $("#price_max").val();
                searchstr += "&sort=" + $("#sort").val();
                window.location.href = "/Good/Index" + searchstr + "#items";
            });

            //设置img宽高
            $('#items img').each(function () {
                var maxHeight = 197.5;    // 图片最大高度
                var screenwidth = $(window).width();
                if (screenwidth > 787) {
                    $(this).css("height", maxHeight);  // 设定等比例缩放后的高度
                }
            });
        })
    </script>

}